{% extends 'workflow_base.html' %}
{% load staticfiles %}

{% block extralmedias %}
<title>配置工作流</title>
<link rel="stylesheet" type="text/css" href="{% static 'common/ContextJS/css/context.standalone.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'common/ContextJS/css/demo.css' %}">
<script type="text/javascript" src="{% static 'common/ContextJS/js/context.js' %}"></script>
<script type="text/javascript" src="{% static 'common/ContextJS/js/demo.js' %}"></script>
{% endblock %}

{% block content %}
<div class="workflow_main">
    <div class="workflow_head">
        <select name="workflow">
            <option value=""></option>
            {% for item in workflow %}
            <option value="{{item.id}}">{{item.name}}</option>
            {% endfor %}
        </select>
        <button class="click_btn btn btn-primary" id="add_workflow" data-url="/workflow/add_workflow/" data-toggle="modal" data-form='{{ WorkFlowForm }}' href="#form_div">新建工作流</button>
    </div>
    <div class="workflow_body">
        <div class="body_head">工作台<button id="is_open" class="btn btn-primary" style="float: right;display: none;    margin-top: -7px;"></button></div>
        <div id="mynetwork" style="height: 500px;" oncontextmenu="return false" ></div>
    </div>

    <button class="click_btn" id="add_node" data-toggle="modal" data-url="/workflow/add_node/" data-form='{{ NodeForm }}' href="#form_div" style="display: none;">添加节点</button>
    <button class="click_btn" id="add_nodeprocess" data-url="/workflow/add_nodeprocess/" data-toggle="modal" data-form='' href="#form_div" style="display: none;">添加节点流程</button>
    <button class="click_btn" id="del_common" data-url="" data-toggle="modal" data-form='' href="#form_div" style="display: none;"></button>
</div>
<script type="text/javascript">
    var container = document.getElementById('mynetwork');
    function canvas_contextmenu(type,id){
        // 画布菜单
        if(type=='canvas'){
            context.attach('canvas', [
                {text: '添加节点', action: function(e){
                    $('#add_node').trigger('click');
                }},
            ]);
        // 节点菜单
        }else if(type=='node'){
            context.attach('canvas', [
                {header: '节点修改'},
                {text: '添加流程关系', action: function(e){
                    $('#add_nodeprocess').trigger('click');
                    others = [{'name':'node_id','val':id}]
                }},
                {divider: true},
                {text: '删除节点', action: function(e){
                    $('#del_common').attr({'data-url':'/workflow/delete_node/','data-form':'<li class="text">你确定要删除该节点吗？</li>'}).text('删除节点');
                    others = [{'name':'id','val':id}]
                    $('#del_common').trigger('click');
                }},
            ]);
        // 边菜单
        }else if(type=='edge'){
            context.attach('canvas', [
                {text: '删除流程', action: function(e){
                    $('#del_common').attr({'data-url':'/workflow/delete_nodeprocess/','data-form':'<li class="text">你确定要删除该流程吗？</li>'}).text('删除流程');
                    console.log(id)
                    others = [{'name':'id','val':id}]
                    $('#del_common').trigger('click');
                }},
            ]);
        }

    }
    canvas_contextmenu('canvas');
    // 点击事件(右击菜单)
    function click_fuc(params){
        if(params.nodes.length){
            canvas_contextmenu('node',params.nodes[0]);
        }else{
            if(params.edges.length){
                canvas_contextmenu('edge',params.edges[0]);
            }else{
                canvas_contextmenu('canvas');
            }

        }
    }

    function draw(id) {
        destroy();
        $.ajax({
            url:'',
            type:'POST',
            data:{'id':id},
            success:function(msg){
                console.log(msg);
                if(msg.is_open){
                    if(msg.is_open=='已启用'){
                        $('#is_open').css('background-color','#00B131');
                    }else{
                        $('#is_open').css('background-color','#ccc');
                    }
                    $('#is_open').show().text(msg.is_open);
                }else{
                    $('#is_open').hide();
                }
                push_data(msg);
                gen_network(container);
            }
        })
    }

    function add_data(id){
        $.ajax({
            url:'',
            type:'POST',
            data:{'id':id},
            success:function(msg){
                push_data(msg);
                var data = {
                    nodes: new vis.DataSet(nodes),
                    edges: new vis.DataSet(edges)
                };
                network.setData(data);
            }
        })
    }
    function reset_nodeprocess_form(id){
        $.ajax({
            url:'/workflow/get_nodeprocess_form/',
            type:'POST',
            data:{'id':id},
            success:function(data){
                $('#add_nodeprocess').attr('data-form',data);
            }
        })
    }
    $('select[name="workflow"]').change(function(){
        var id = $(this).val();
        draw(id);
        reset_nodeprocess_form(id);
    })

    $('#add_node').click(function(){
        var workflow_id = $('select[name="workflow"]').val();
        if(workflow_id){
            others = [{'name':'workflow_id','val':workflow_id}];
        }
    })

    $('#is_open').click(function(){
        var text = $(this).text();
        var workflow_id = $('select[name="workflow"]').val();
        if(text=='已启用'){
            text = '你确定要关闭该工作流吗？';
        }else{
            text = '你确定要启用该工作流吗？';
        }
        $('#del_common').attr({'data-url':'/workflow/open_or_close/','data-form':'<li class="text">'+text+'</li>'}).text('更新工作流状态');
        others = [{'name':'workflow_id','val':workflow_id}];
        $('#del_common').trigger('click');
    })

    function after_open(){
        var text = $('#is_open').text();
        if(text=='已启用'){
            $('#is_open').text('已关闭').css('background-color','#ccc');
        }else{
            $('#is_open').text('已启用').css('background-color','#00B131');
        }
    }
</script>
{% endblock %}